<template>
  <div>
    <myheader></myheader>
    <div id="carousel" class="carousel slide" data-ride="carousel">
      <!--      <ul class="carousel-indicators">-->
      <!--        <li data-target="#carousel" data-slide-to="0" class="active"></li>-->
      <!--        <li data-target="#carousel" data-slide-to="1"></li>-->
      <!--        <li data-target="#carousel" data-slide-to="2"></li>-->
      <!--      </ul>-->

      <div class="carousel-inner">
        <!--Text only with background image-->
        <!--				<div class="carousel-item active">-->
        <!--					<div class="container slide-textonly">-->
        <!--						<div>-->
        <!--							<h1>York &amp; Smith</h1>-->
        <!--							<p class="lead">Spring/Summer 2018 Collection</p>-->
        <!--							<a href="#" class="btn btn-outline-secondary">View Collection</a>-->
        <!--						</div>-->
        <!--					</div>-->
        <!--				</div>-->
        <!-- 幻灯片组件 -->
        <Carousel :height="700" :datas="param" @click="click"></Carousel>
      </div>
    </div>
    <section class="collections text-center">
      <div class="container-fluid">
        <div class="row">
          <div class="collection col-md-6 alt-background">
            <div class="container container-right text-center">
              <div>
                <h1>Women's</h1>
                <p class="lead">Spring/Summer 2018 Collection</p>
                <a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
              </div>
            </div>
          </div>
          <div class="collection col-md-6 bg-secondary inverted">
            <div class="container container-left text-center">
              <div>
                <h1>Men's</h1>
                <p class="lead">Spring/Summer 2018 Collection</p>
                <a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="featured-block text-center">
      <div class="container">
        <div class="row justify-center">
          <div class="col-md-6 text-center">
            <img
              class="mt-4 mb-4 img-fluid"
              src="../assets/images/placeholder-jacket.png"
              style="width: 100%;"
            />
          </div>
          <div class="col-md-6 text-center text-md-left">
            <h2 class="mb-3">Spring/Summer Collection 2018</h2>
            <p class="lead mt-2 mb-3">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat
              sed sem sagittis cursus.
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed
              sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.
            </p>
            <a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
          </div>
        </div>
      </div>
    </section>

    <div class="divider"></div>

    <section class="products text-center">
      <div class="container">
        <h3>热门商品展示</h3>
        <table>
          <tr>
            <th>排行榜</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品图片</th>
            <th>商品点击数</th>
          </tr>
          <tr v-for='good,index in goodsrank'>
            <td  v-html="$options.filters.goodrank(index+1)"></td>
            <td>{{ good.name }}</td>
            <td>{{ good.price}}</td>
            <td>
              <img :src="qiniuurl + good.img" alt="" width="120" height="120" class="rounded-corners img-fluid">
            </td>
            <td>{{ good.clicks }}</td>
          </tr>
        </table>
      </div>

    </section>

    <div class="divider"></div>

    <section class="products text-center">
      <div class="container">
        <h3 class="mb-4">商品展示</h3>
        <div class="row">
          <div v-for="item in datalist" class="col-sm-6 col-md-3 col-product">
            <figure>
              <img
                class="rounded-corners img-fluid"
                :src="qiniuurl + item.img"
                width="240"
                height="240"
              />
              <figcaption>
                <div class="thumb-overlay">
                  <a href="item" title="More Info">
                    <i class="fas fa-search-plus"></i>
                  </a>
                </div>
              </figcaption>
            </figure>
            <h4>
              <a :href="'/item/?id=' + item.id">{{ item.name }}</a>
            </h4>
            <p>
              <span class="emphasis">${{ item.price }}</span>
            </p>
            <h5 v-show='type'><a :href="'/editgood/?id=' + item.id">修改商品</a></h5>
          </div>
        </div>
        <div>
          <!-- 分页逻辑 -->
          <Pagination
            v-model="pagination"
            @change="change_pag"
            small
            align="center"
            layout="pager, jumper"
          ></Pagination>
        </div>
        <!-- 手动分页 -->
        <!-- <div>
          <a v-show="lastpage" @click="get_data(lastpage)">上一页</a>
            <button v-for="index in all" @click="get_data(index)">{{ index }}</button>
          <a v-show="nextpage" @click="get_data(nextpage)">下一页</a>
        </div>-->
      </div>
    </section>

    <div class="divider"></div>

    <section class="cta text-center">
      <div class="container">
        <h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
        <form class="subscribe">
          <div class="form-group row pt-3">
            <div class="col-sm-8 mb-3">
              <input type="text" class="form-control" id="inputName" placeholder="Your Name" />
            </div>
            <div class="col-sm-4">
              <button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
            </div>
          </div>
        </form>
      </div>
    </section>

    <footer class="footer">
      <div class="container">@v3u.cn</div>
    </footer>
  </div>
</template>


<script>
import myheader from "./myheader.vue";
import { config } from "../config";

export default {
  data() {
    return {
      msg: "这是一个变量",
      type:'',
      param: [],
      // 商品列表变量
      datalist: [],
      // 分页器变量
      pagination: {
        page: 1,
        size: 3,
        total: 0
      },

      // 手动分页器
      total: 0, // 商品总数
      cur: 1, // 当前页
      all: 0, // 总页数
      lastpage: 0, //上一页
      nextpage: 0, //下一页
      size: 3,
      qiniuurl: config["qiniu"], // 七牛云url
      goodsrank:[],
      // 购物车列表
      cartlist: []
    };
  },
  components: {
    myheader: myheader
  },
  filters:{
    goodrank:function (value) {
      if (value <= 3){
        return '<h3 style="color:red";>'+ value + '</h3>'
      }
      return value
    }
  },
  mounted: function() {
    // this.get_data(1); // 调用手动分页接口
    this.get_img();
    this.change_pag();
    this.type = localStorage.getItem('type')
    this.get_goodsrank();
    this.init_cart()
  },
  methods: {
    // 计算购物车总数
    totalcount:function(){
      var total = 0;
      var price = 0;
      for (let i=0,l=this.cartlist.length;i<l;i++){
        total += this.cartlist[i].num
        price += this.cartlist[i].num * this.cartlist[i].price
      }
      return {total:total,price:price}
    },
    // 初始化购物车
    init_cart:function(){
      this.cartlist = JSON.parse(localStorage.getItem('cart'))
    },

    // 手动分页接口
    get_data: function() {
      this.axios.get("http://localhost:8000/goodslist/", {
          params: {
            page: mypage,
            size: this.size
          }
        }).then(res => {
          console.log(res.data);
          this.datalist = res.data.data;
          // 判断上一页
          if (mypage == 1) {
            this.lastpage = 0;
          } else {
            this.lastpage = mypage - 1;
          }
          // 计算总页数
          this.all = Math.ceil(res.data.total / this.size);
          if (mypage == this.all) {
            this.nextpage = 0;
          } else {
            this.nextpage = this.nextpage + 1;
          }
        });
    },
    // 分页器
    change_pag: function() {
      this.axios.get("http://localhost:8000/goodslist/", {
          params: {
            page: this.pagination.page,
            size: this.pagination.size
          }
        }).then(res => {
          // console.log(res.data)
          this.datalist = res.data.data;
          this.pagination.total = res.data.total;
        });
    },
    // 幻灯片点击事件
    click: function(index, data) {
      // console.log(data)
      // 点击之后跳转到指定页面
      window.location.href = data.link;
    },
    get_img: function() {
      this.axios.get(config["inserpic"]).then(res => {
        // console.log(res.data);
        // this.param = res.data
        // 方法2， 较为灵活，能够更好的处理json字符串
        var mylist = res.data;
        var datalist = [];
        for (let i = 0, l = mylist.length; i < l; i++) {
          datalist.push({
            title: mylist[i]["title"],
            link: mylist[i]["link"],
            image: mylist[i]["image"]
          });
          this.param = datalist;
        }
      });
    },
    // 获取排行榜
    get_goodsrank:function(){
      this.axios.get('http://localhost:8000/goodsrank/').then( result =>{
        this.goodsrank = result.data
        // console.log(result.data)
      })
    }
  }
};
</script>

<style>
</style>
